<template>
	<view>
		<view class="presentation">
			<text class="subtitle">Collapse 折叠面板</text>
			<text class="describe">Collapse 折叠面板，用来折叠/显示过长的内容或者是列表，内容及样式自定义。</text>
		</view>
		<view class="presentation_subtitle">基本用法</view>
		<ker-collapse :accordion="true">
			<ker-collapse-item :title="item.title" v-for="(item,index) in items" :key="index">
				<view class="item_content">
					{{item.content}}
				</view>
			</ker-collapse-item>
		</ker-collapse>
		<view class="presentation_subtitle">手风琴效果</view>
		<ker-collapse :accordion="true">
			<ker-collapse-item :title="item.title" v-for="(item,index) in items" :key="index" :showAnimation="true">
				<view class="item_content">
					{{item.content}}
				</view>
			</ker-collapse-item>
		</ker-collapse>
		<view class="presentation_subtitle">默认展开-手风琴效果</view>
		<ker-collapse :accordion="true">
			<ker-collapse-item :title="item.title" :open="index == 0" v-for="(item,index) in items" :key="index" :showAnimation="true">
				<view class="item_content">
					{{item.content}}
				</view>
			</ker-collapse-item>
		</ker-collapse>
	</view>
</template>

<script>
	import kerCollapse from '../../components/ker-collapse/ker-collapse.vue'
	import kerCollapseItem from '../../components/ker-collapse/ker-collapse-item.vue'
	export default {
		data() {
			return {
				items:[
					{
						title:'杜甫',
						content:'杜甫远祖为汉武帝时期有名的酷吏杜周，祖父杜审言。 [3]  杜甫与唐代另一大诗人即“小李杜”的杜牧同为晋代大学者、名将杜预之后，不过两支派甚远。祖籍襄阳（今属湖北），曾祖父杜依艺为巩县令，遂居巩县（今属河南）。杜甫出自杜预次子杜耽，而杜牧出自杜预少子杜尹。杜甫于唐玄宗先天元年（712年）生于巩县。母亲崔氏，在杜甫年幼时就故去。崔家也是有名望的世家大族，他一生中曾多次和亲疏不等的舅父、表弟相遇。'
					},
					{
						title:'李白',
						content:'李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。北京大学教授李志敏评价：“李白之诗呼吸宇宙，出乎道；杜甫之诗德参天地，源于儒，皆至天人合一境界，故能出神入化。“ [1]  《旧唐书》记载李白为山东人 [2]  ；《新唐书》记载，李白为兴圣皇帝李暠九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友 [3]  。'	
					},
					{
						title:'唐玄宗',
						content:'垂拱元年（685年）秋八月戊寅（公历9月8日），李隆基生于东都洛阳。 [3]  出生时其父李旦为帝，母窦氏为德妃。此时正是唐朝宫闱多事之秋。在他降临世间的前一年，他的祖母武则天与宰臣裴炎把他的伯父唐中宗废为庐陵王，其父豫王李旦被立为皇帝，是为睿宗。睿宗名为大唐国主，年富力强，却只能居于别殿，不许听政。而武则天年逾花甲，仍临朝称制，军国政事由她专断。武则天在镇压徐敬业的扬州叛乱之后，兴告密之风，冤狱迭起，唐宗室及朝臣中的反对派不少人受到迫害。史称“自垂拱以来，任用酷吏先诛唐宗室贵戚数百人，次及大臣数百家，其刺史、郎将以下，不可胜数”。 [4]'
					}
				]
			}
		},
		components:{
			kerCollapse,
			kerCollapseItem
		},
		methods: {

		},
		mounted() {}
	}
</script>
<style lang='scss' scoped>
	.presentation {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px 40px;
		.subtitle {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.describe {
			font-size: 14px;
			color: #999;
		}
	}
	.presentation_subtitle{
		font-size: 14px;
		color: #FFF;
		height: 36px;
		line-height: 36px;
		background-color: #6b6b6b;
		padding: 0 15px;
	}
	.item_content{
		background-color: #f9f9f9;
		font-size: 14px;
		padding: 15px;
		color: #999;
	}
</style>
